import React,{useEffect,useState,useRef} from "react";
import '../../assets/css/news/newsadd.css'
import {getType,getAdd} from '../../apis/news'
import { Form,Input, Upload, Select,Radio,Button,Modal  } from 'antd';
import type { RadioChangeEvent } from 'antd';
import UserInfoImages from '../userInfo/UserInfoImages'
import moment from "moment";
import { use } from "echarts";
function Newsadd(props:any){
  console.log(props)
  //类型
  const [state,setState] = useState<any>([])
   const handleChange = async(value: string) => {
    console.log(`selected ${value}`);
  };
  const getState = async()=>{
    let res:any = await getType({})
    console.log(res)
    setState(res.data.list)
  }
  //状态
  const [value, setValue] = useState(1);

  const onChange = (e: RadioChangeEvent) => {
    console.log('radio checked', e.target.value);
    setValue(e.target.value);
  };
  //取消
  const getNo = ()=>{
    props.handleCancels()
  }
  const [confirmLoading,] = useState(false);
  const handleCancel = () => {
    props.handleCancels()
  };
  //图片
  const [modalImg, setModalImg] = useState('');
  const obtainImg = (val:any)=>{
    setModalImg(val)
}
  //提交
  const onFinish = async (values: any) => {
    console.log('Success:', values);
    let date:any = moment().format('YYYY-MM-DD HH:mm:ss')
    let res:any = await getAdd({
      id:props.newadd.id,
      ...values,picture:modalImg,
      addtime: date
    }).catch()
    console.log(res)
    if(res && res.errCode === 10000){
      props.handleCancels()
    }
  };
  //修改
  const upData = useRef<any>()
  useEffect(()=>{
    upData.current.setFieldsValue(props.newadd)
    getState()
    
  },[])
  return(
    <>
      <Modal
        title={props.newadd.id?'修改公告':'添加公告'}
        width="900px"
        open={props.isModalOpen}
        confirmLoading={confirmLoading}
        onCancel={handleCancel}
        footer={[]}
      >
      <div className="newsadd">
       <Form name="complex-form" ref={upData} onFinish={onFinish}>
        
        <Form.Item label="标签" name="title" rules={[{ required: true, message: '请输入标题' }]}>
          <Input />
        </Form.Item>
        <Form.Item label="公告内容" name="content">
         <textarea></textarea>
        </Form.Item>
        <Form.Item label="公告图片" name="picture">
          <UserInfoImages 
            urlpass={props.newadd.picture?props.newadd.picture:''} 
            obtainImg={obtainImg}>
          </UserInfoImages>
        </Form.Item>
        <Form.Item label="状态" name="state" rules={[{ required: true, message: '请选择状态' }]}>
          <Radio.Group onChange={onChange} value={value}>
            <Radio value={1}>开启</Radio>
            <Radio value={2}>关闭</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item label="公告类型" name="type" rules={[{ required: true, message: '请输入公告类型' }]}>
          <Select
            placeholder="请选择"
            onChange={handleChange}
            allowClear
            fieldNames={{label:'name',value:'id'}}
            options={state}
          />
        </Form.Item>
        <Form.Item style={{textAlign:'center'}}>
          <Button type="primary" htmlType="submit">确定</Button>
          <Button style={{marginLeft:'10px'}} onClick={getNo}>取消</Button>
        </Form.Item>
       </Form>
    </div>
      </Modal>
    </>
  )
}
export default Newsadd